<template>
  <div class="logistics_page">
    <div class="logistics_info">
      <p class="detail_title">物流信息</p>
      <div class="logistics_list">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.time"
            placement="top"
          >
            <div class="activity_content">
              {{ activity.context }}
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'

const props = defineProps<{
  logisticsList?: {
    arr?: Array<{
      time: string
      context: string
    }>
  }
}>()

const { logisticsList } = toRefs(props)
const activities = ref<Array<{
  time: string
  context: string
}>>([])

// 初始化数据
if (logisticsList.value && logisticsList.value.arr) {
  activities.value = logisticsList.value.arr
} else {
  activities.value = [
    {
      time: '2023-05-15 10:20:15',
      context: '订单已支付，等待发货'
    },
    {
      time: '2023-05-16 15:30:25',
      context: '已发货，快递公司：顺丰速运，运单号：SF123456789CN'
    }
  ]
}
</script>

<style lang="scss" scoped>
.logistics_page {
  .detail_title {
    font-size: 20px;
    color: #333333;
    position: relative;
    margin: 30px 20px 20px;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 5px;
      left: -20px;
      width: 4px;
      height: 20px;
      background-color: #3a68f2;
    }
  }

  .logistics_info {
    .logistics_list {
      padding-left: 20px;
      
      .activity_content {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
      }
    }
  }
}
</style>